<template>
  <div>
    <!-- gutter 栅格间隔 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="¥ 126560">
            <template slot="charts">
              <span>周同比 &nbsp; &nbsp; 56.7% </span>
              <svg t="1653128143573" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3064" width="16" height="16">
                <path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="3065"></path>
              </svg>
              <span>日同比 &nbsp; &nbsp; 19.96%</span>
              <svg t="1653128351257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4977" width="16" height="16">
                <path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#1afa29" p-id="4978"></path>
              </svg>
            </template>
            <template slot="footer">
              <span>日销售额 ¥ 126560</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88460">
            <template slot="charts">
              <LineChart></LineChart>
            </template>
            <template slot="footer">
              <span>日访问量 1234</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template slot="charts">
              <BarChart></BarChart>
            </template>
            <template slot="footer">
              <span>转化率 65%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <ProgressChart></ProgressChart>
            </template>
            <template slot="footer">
              <span>周同比 &nbsp; &nbsp; 56.7% </span>
              <svg t="1653128143573" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3064" width="16" height="16">
                <path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="3065"></path>
              </svg>
              <span>日同比 &nbsp; &nbsp; 19.96%</span>
              <svg t="1653128351257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4977" width="16" height="16">
                <path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#1afa29" p-id="4978"></path>
              </svg>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './detail'
import LineChart from './line-chart'
import BarChart from './bar-chart'
import ProgressChart from './progress-chart'

export default {
  name: 'card',
  components: {
    Detail,
    LineChart,
    BarChart,
    ProgressChart
  }
}
</script>